<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转导航动画</title>
    <!-- 引入图标库 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button id="open">
                    <i class="fas fa-bars"></i>
                </button>
                <button id="close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <div class="content">
            <h1>Amazing Article</h1>
            <small>Siebe</small>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, minus? Quo excepturi fugit magnam
                molestiae eaque vel facilis consectetur! Voluptatum explicabo, reiciendis facere autem ratione nam
                quisquam nesciunt vitae minima.
                Accusamus tempora dolores fugit, corporis odio minus deleniti asperiores, atque dolor pariatur hic
                quisquam aliquid sint quam corrupti culpa! Nisi magnam iste quasi asperiores impedit autem quam dolores
                numquam fugiat?
                Dolore nostrum harum a maiores vitae et quasi molestiae modi error minima? Quidem at reprehenderit
                voluptatem minus, vero necessitatibus et explicabo quasi itaque corporis magnam. Architecto voluptas
                similique sunt officia.</p>
            <h3>My Dog</h3>
            <img src="./image/dog.jpg" alt="dog" srcset="">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel nemo eveniet alias est voluptas distinctio
                impedit, ipsa enim consequuntur dolores consectetur porro, aliquid deleniti? Expedita doloribus eos cum
                consectetur id.
                Praesentium repudiandae consectetur hic, cupiditate dolorem molestiae obcaecati consequatur sunt maiores
                nam ipsum natus quos quo fugit cum voluptate corrupti laborum perferendis non! Ducimus distinctio in
                impedit voluptatem itaque ipsam.
                Repudiandae, facere error voluptatibus debitis et voluptate dolor optio quis, vero similique molestias
                velit obcaecati ad adipisci! Nam blanditiis odio nisi exercitationem error, ad optio? Maiores
                praesentium asperiores nesciunt architecto.</p>
        </div>
    </div>

    <nav>
        <ul>
            <li><i class="fas fa-home"></i> Home</li>
            <li><i class="fas fa-user-alt"></i> About</li>
            <li><i class="fas fa-envelope"></i> Contact</li>
        </ul>
    </nav>
    <script src="./script.js"></script>
</body>

</html>